<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>修改流程规则</title>
</head>
<body>
	<div th:fragment="main" id="modifyProcessRule">
		<style type="text/css">
			#modifyProcessRule{
		        width: auto;
		        min-width: 1000px;
			    padding: 20px 25px 10px 25px;
			    height: 100%;
			    background-color: #eaeaea;
			    overflow: auto;
			    color: #333;
			}
			.content-title{
			    color: #000;
			    font-size: 14px;
				padding-bottom: 20px;
			}
			.content-title span{
				cursor: pointer;
			}
			.content-bar{
				margin-top:50px; 
			}
			.content-bar .navbar-form{
				padding: 0 5px;
				margin: 0 auto;
			}
			.form-group{
				text-align: right;
			}
			.btn-cyan{
				color: #fff;
				background-color: rgba(26, 156, 178, 1);
				border-color: rgba(26, 156, 178, 1);
			}
			.btn-cyan:hover{
				color: #fff;
				background-color: rgba(25, 109, 123, 0.8);
				border-color: rgba(25, 109, 123, 1);
			}
			.uploadIco:hover{
				color:#000000;
			}
			.btn-cyan:active{
				color: #fff;
				background-color: rgba(25, 109, 123, 1);
				border-color: rgba(25, 109, 123, 1);
			}
			.btn-cyan:focus{
				color: #fff;
				background-color: rgba(25, 109, 123, 1);
				border-color: rgba(25, 109, 123, 1);
			}
			.btn-bg{
				margin: 0 10px;
				padding: 7px 25px;
			}
			.footer{
			    float: right;
  				margin-right: 20%;
  				margin-top:30px;
			}
			
			.form-label{
				width: 17%;
				float: left;
				text-align: right;
			    margin-bottom: 0;
			    padding-top: 7px;
		        padding-left: 15px;
	    		padding-right: 15px;
			}
			#fileupload {
			display: none;
			}
			.form-input{
				width: 25%;
				min-width: 100px;
				height: 34px;
				float: left;
			    padding: 6px 12px;
			    background-color: #fff;
			    border: 1px solid #c2cad8;
			    border-radius: 4px;
			    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
			    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
			    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
			    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
			    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
			}
			.image{
				height:120px;
				display:block;
			}
			textarea.form-input{
				height: auto;
			}
			input[type=button]{
				float: left;
			}
			.photo{
    			width: 25%;
				float: left;
				text-align: right;
			    margin-bottom: 0;
			    padding-top: 8px;
		        padding-left: 13px;
	    		padding-right: 15px;
			}
			.img-box{
				margin-left:15%;
			}
			.img-box>div{
				float: left;
				margin: 0 10px;
			}
			.img{
				width:100px;
				height:100px;
			}
			.imgDescription{
				width:100px;
				margin:5px 0;
				display:block;
			}
			.delete{
				width:100%;
				flaot:left;
				display:block;
				color:#FF0000;
			}
			.uploadIco{
			color:#0000FF;
			margin-top: 8px;
			float:left;
			}
			.btn{
			border-radius: 0;
			}
		</style>
		<div class="content-title">
	        <p><span>系统管理</span>&nbsp;>&nbsp;<span>修改流程规则</span></p>
	    </div>
		<div class="content-bar">
			<form id="form-box" class="form-horizontal clearfix col-xs-offset-1" autocomplete="off">
				<div class="form-group">
					<label class="form-label" for="processRuleName">流程规则名称&nbsp;:</label>
					<input type="text" id="processRuleName" name="processRuleName" class="form-input" placeholder>
					<label class="form-label" for="deviceTypeId">设备类型&nbsp;:</label>
					<select id="deviceTypeId" class="form-input" name="deviceTypeId"></select>
				</div>
				<div class="form-group">
					<label class="form-label" for="workOrderTypeId">工单类型&nbsp;:</label>
					<select id="workOrderTypeId" class="form-input" name="workOrderTypeId"></select>
					<label class="form-label" for="photoCount">需要示例图片数量&nbsp;:</label>
					<select id="photoCount" class="form-input" name="photoCount" onchange="photoCountFn()">
						<option value="null">选择图片数量</option>
						<option value="0">任意</option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
						<option value="7">7</option>
						<option value="8">8</option>
						<option value="9">9</option>
						<option value="10">10</option>
						<option value="11">11</option>
						<option value="12">12</option>
						<option value="13">13</option>
						<option value="14">14</option>
						<option value="15">15</option>
						<option value="16">16</option>
						<option value="17">17</option>
						<option value="18">18</option>
						<option value="19">19</option>
						<option value="20">20</option>
					</select>
					
				</div>
				<div class="form-group">
					<label class="form-label" for="projectName">项目名称&nbsp;:</label>
					<select id="projectId" class="form-input" name="projectId"></select>
					<label class="form-label" for="description">备注&nbsp;:</label>
					<textarea class="form-input" id="processRuleDescription" name="description" cols="0" rows="4"></textarea>
					<label class="form-label" for="additionalBusinessId">附加业务信息&nbsp;:</label>
					<select id="additionalBusinessId" class="form-input" name="additionalBusinessId">
						<option value="1">①基站勘察</option>
						<option value="2">②基站安装</option>
						<option value="3">③基站排障</option>
						<option value="4">④终端勘察</option>
						<option value="5">⑤终端安装</option>
						<option value="6">⑥终端排障</option>
						<option value="7">⑦监控勘察</option>
						<option value="8">⑧监控安装</option>
						<option value="9">⑨监控排障</option>
					</select>
				</div>
				<div class="form-group">
					<label class="form-label" for="image">示例图片&nbsp;:</label>
					<a type="text" onclick="appFile()"  id="uploadIco" class="uploadIco" >选择图标文件</a>
					<input id="fileupload" accept=".jpg" type="file" name="file" th:attr="data-url=@{'/file/upload/temp'}" multiple="multiple">
					<div class="photo" id="photo"></div>
				</div>
				<div id="img-box" class="img-box clearfix">
				</div>
				<div class="form-group">
                    <!-- <input type="button" value="返回" class="btn btn-default pull-right cancel" id="cancel"> -->
                    <!-- <input type="button" value="保存" class="btn btn-primary pull-right save" id="save"> -->
                    <div class="footer">
	                    <a id="save" class="btn btn-cyan btn-bg" role="button">保存</a>
	                    <a id="cancel" class="btn btn-cyan btn-bg" href="#qualitycontrol-systemGroup-processRule" role="button">返回</a>
                    </div>
                </div>
			</form>
		<script th:src="@{/assets/jquery/plugins/jquery.ui.widget.js}"></script>
		<script th:src="@{/assets/jquery/plugins/jquery.iframe-transport.js}"></script>
		<script th:src="@{/assets/jquery/plugins/jquery.fileupload.js}"></script>
		<script type="text/JavaScript">
		// 获取流程规则信息
		console.log(processRuleData)
		var id = processRuleData.id;
		$("#processRuleName").val(processRuleData.name);
		$("#processRuleDescription").val(processRuleData.description);
		$("#additionalBusinessId").val(processRuleData.additionalBusinessId);		
		
		
		
		var phCount =  null;
	    var imgnum = null;
	    var phnum = 1;
	    var imgList = [];
	    var j = null;
	    var imageStr = null;
	    var phCountStr = null;
	    
	    
		console.log(phCount)
	    
	    
	    
		// 查询工单类型
		$.ajax({
	        url: contextPath + "/WorkOrderType/queryAllWorkOrderType",
	        type: "get",
	        cache: false,
	        dataType: "json",
	        success: function(data){
	            var str = '<option value="">请选择</option>';
	            for (var i =0 ,len = data.length; i < len; i++) {
	            	str += '<option value="' + data[i].id + '">' + data[i].name + "</option>";
	            }
	            $("#workOrderTypeId").html(str);
	            $("#workOrderTypeId").val(processRuleData.workOrderTypeId);
	        },
	        error: function(data){
	            console.log(data);
	            $("#workOrderType").html('<option value="">数据异常</option>');
	        }
	    });
		// 查询项目
		$.ajax({
	        url: contextPath + "/Project/queryAllProject",
	        type: "get",
	        cache: false,
	        dataType: "json",
	        success: function(data){
	            var str = '<option value="">请选择</option>';
	            for (var i =0 ,len = data.length; i < len; i++) {
	            	str += '<option value="' + data[i].id + '">' + data[i].name + "</option>";
	            }
	            $("#projectId").html(str);
	            $("#projectId").val(processRuleData.projectId);
	        },
	        error: function(data){
	            console.log(data);
	            $("#projectId").html('<option value="">数据异常</option>');
	        }
	    });
	    // 查询设备类型
		$.ajax({
	        url: contextPath + "/DeviceType/queryAllDeviceType",
			type: "get",
	        cache: false,
	        dataType: "json",
	        success: function(data){
	            var str = '<option value="">请选择</option>';
	            for (var i =0 ,len = data.length; i < len; i++) {
	            	str += '<option value="' + data[i].id + '">' + data[i].name + "</option>";
	            }
	            $("#deviceTypeId").html(str);
	            $("#deviceTypeId").val(processRuleData.deviceTypeId);
	        },
	        error: function(data){
	            console.log(data)
	            $("#deviceTypeId").html('<option value="">数据异常</option>');
	        }
	    });
	    //
	    $.ajax({
	        url: contextPath + "/ProcessRule/queryProcessRule/" + id,
			type: "get",
	        cache: false,
	        dataType: "json",
	        success: function(data){
	            if(data.code == 1){
	            	console.log(data.data);
	            	imgnum = data.data.processRuleToImageFileList.length;
	            	phCount = data.data.photoCount;
	            	$("#photoCount").val(data.data.photoCount);
	            	if(phCount == 0){
	        			phCountStr ="<label  for='imagenum'>可以上传任意数量图片,已上传" + imgnum + "张图片</label>";
	        		}
	        		else{
	        			phCountStr = "<label  for='imagenum'>需上传" + phCount + "张图片,已上传" + imgnum + "张图片</label>";
	        		}
	            	$("#photo").append(phCountStr);
	            	for(var i = 0 ; i < imgnum ; i++){
	            		var obj = {};
	        	    	j = i + 1;
	        	    	obj.id = data.data.processRuleToImageFileList[i].id;
	        	    	obj.processRuleId = data.data.processRuleToImageFileList[i].processRuleId;
	             	   	obj.deletePath = data.data.processRuleToImageFileList[i].deletePath; 
	        			obj.downPath = data.data.processRuleToImageFileList[i].downPath;
	        			obj.description = data.data.processRuleToImageFileList[i].description;
	        			imgList[i] = obj; 
	        			
	        			imageStr = "<div id='image" + j + "'><img processRuleId='" + obj.processRuleId + "'class='img' downpath='" + obj.downPath + "' delpath='" + obj.deletePath + "' src='" + obj.downPath +"' id='" + obj.id + "'>" 
	        						+ "<input class='imgDescription' id='imgDescription" + j +"'value='" + obj.description +"' type='text'>"
	        						+ "<a delPath='image" + j +"' class='delfileButton' style='color:#FF0000' onclick='deleteImg(this)'>&nbsp;[删除]</a></div>";
	        						
	        			$("#img-box").append(imageStr);
	         	   	}
	            }
	        },
	        error: function(data){
	        	
	        }
	    });
		//上传图片数量
		function photoCountFn(){
			phCount = $("#photoCount").val();
			if(phCount != "null"){
				if(phCount == "0"){
					phCountStr = "<label  for='imagenum'>可上传任意数量图片</label>";
				}
				else{
					phCountStr = "<label  for='imagenum'>需上传" + phCount + "张图片</label>";
				}
			}
			else{
					phCountStr = "<label  for='imagenum'>请选择示例图片的数量</label>";
			}
			$('#photo').html("");
			$("#photo").append(phCountStr);
		}
		//上传图片
        function appFile(){
			var upFiles = $(".upfile");
			//获取选择的 img.attr
			upFiles.each(function(index,element){
				console.log($(element).attr('attr'));
			});
			console.log(phCount)
			if(phCount == "null"){
				toastr.error("请选择示例图片数量！");
			}else{
				if(imgnum > phCount && phCount != 0){
					toastr.error("上传图片已达上限");
				}else{
					$('#fileupload').click();
				}
			}
		}
	
        
        $('#fileupload').fileupload({
	    	singleFileUploads : false,
			dataType : 'json',	
			done : function(e, data) {
				if (data.result.code == 1) {
					var uploadFiles = data.result.data;
					console.log(uploadFiles);
					uploadFiles.forEach(function(filepath) {
						
						imgnum++;
						$('#photo').html("");
						if(phCount == 0){
							phCountStr ="<label  for='imagenum'>可以上传任意数量图片,已上传" + imgnum + "张图片</label>";
						}
						else{
							phCountStr = "<label  for='imagenum'>需上传" + phCount + "张图片,已上传" + imgnum + "张图片</label>";
						}
						imageStr = "<div id='image" + imgnum + "'><img processRuleId='" + id +"' id='null' class='img' downpath='" + filepath.downPath + "' delpath='" + filepath.deletePath + "' src='" + filepath.downPath +"' id='img" + imgnum + "'>" 
									+ "<input class='imgDescription' id='imgDescription" + imgnum +"' type='text'>"
									+ "<a delPath='image" + imgnum + "'class='delfileButton'style='color:#FF0000' onclick='deleteImg(this)'>&nbsp;[删除]</a></div>";
						
						
						$("#photo").append(phCountStr);
						$("#img-box").append(imageStr);
						
					 }) 
				} else {
					console.log(data.result.data);
				}
				console.log(imgnum);
				console.log(imgList);
			}
		});
		
	  	//删除选择的图片
		function deleteImg(obj){
			var url = $(obj).attr('delPath');
			$("#"+url).remove("");
			phnum = imgnum - 1;
			imgnum = imgnum - 1;
			console.log(phnum);
			if(phCount == 0){
				phCountStr = "<label  for='imagenum'>可以上传任意张图片,已上传" + phnum + "张图片</label>";
			}
			else{
				phCountStr = "<label  for='imagenum'>需上传" + phCount + "张图片,已上传" + phnum + "张图片</label>";

			}
			$("#photo").html("");
			$("#photo").append(phCountStr);
		}
	  	
		// 保存
        $('#save').on('click',function(){
            if ($("#processRuleName").val().trim().length == 0) {
         		toastr.error("流程规则名称不得为空！");
         		return;
         	}
            if ($("#processRuleName").val().trim().length > 25) {
        		toastr.error("流程规则名称不得超过25个字符！");
        		return;
        	}
            if ($("#processRuleDescription").val().trim().length > 250) {
        		toastr.error("备注信息不得超过250个字符！");
        		return;
        	}
         	if($("#deviceTypeId").val() == "null"){
         		toastr.error("设备类型不得为空！");
         		return;
         	}
         	if($("#projectId").val() == "null"){
         		toastr.error("项目名称不得为空！");
         		return;
         	}
         	if($("#workOrderTypeId").val() == "null"){
         		toastr.error("工单类型名称不得为空！");
         		return;
         	}
         	console.log($("#additionalBusinessId").length)
         	if($("#additionalBusinessId").val() == "null"){
         		toastr.error("附加任务信息不得为空！");
         		return;
         	}
            phCount = $("#photoCount").val();
         	if(phCount == "null"){
         		toastr.error("请选择示例图片数量！");
         		return;
         	}
     	   	if(phCount != 0){
	     	   	if($(".img").length > phCount){
	     	   		toastr.error("上传图片过多，请删除图片或修改允许示例图片数量！");
	     	   		return;
	     	   	}
	     	   	if($(".img").length < phCount){
	     	   		toastr.error("上传图片过少，请继续上传图片或修改允许示例图片数量！");
	     	   		return;
     	   		}
     	   	}
     	   	imgList.splice(0,imgList.length);
     	   	for(var i=0;i<$(".img").length;i++){
     	   		var obj={};
	     	   	obj.deletePath = $($(".img")[i]).attr('delpath'); 
				obj.downPath = $($(".img")[i]).attr('downpath');
                obj.description = $(".imgDescription")[i].value.trim();
                if(obj.description.length == 0){
                    toastr.error("图片描述不得为空！");
                    return;
                }
				if(obj.description.length > 25){
					toastr.error("图片描述不得超过25个字符！");
	        		return;
				}
				obj.id = $($(".img")[i]).attr('id');
				console.log(obj);
				obj.processRuleId = id;
				imgList[i] = obj; 
     	   	}

			for(var k=0 ; k < imgList.length ; k++){
			    for(var l=k+1;l < imgList.length ; l++ ){
			        if(imgList[k].description == imgList[l].description){
			            toastr.error("图片描述不得重复！");
			            return;
					}
				}
			}

     				var formData = {
                        "additionalBusinessId": $("#additionalBusinessId").val().trim(),
                        "description": $("#processRuleDescription").val().trim(),
                        "deviceTypeId": $("#deviceTypeId").val().trim(),
                        "deviceTypeName": $("#deviceTypeId").find("option:selected").text().trim(),
                        "name": $("#processRuleName").val().trim(),
     	                   	"photoCount":phCount,
     	                    "processRuleToImageFileList": imgList,
                        "projectId": $("#projectId").val().trim(),
                        "projectName": $("#projectId").find("option:selected").text().trim(),
                        "workOrderTypeId": $("#workOrderTypeId").val().trim(),
                        "workOrderTypeName": $("#workOrderTypeId").find("option:selected").text().trim(),
    						"id":id
     					}
     				console.log(formData);
     				
     				$.ajax({
                         url: contextPath + '/ProcessRule/modifyProcessRule',
                         type: 'POST',
                         data: JSON.stringify(formData),
                         cache : false,
                         contentType: "application/json",
                         success: function (D) {
                        	 if(D.code == 1){
                        		console.log(1)
                              	toastr.success("修改流程规则，保存成功!");
                              	console.log(D)
                              	location.hash = "#qualitycontrol-systemGroup-processRule";
                        	 }
                        	 else{
                        		 toastr.error(D.message);
                        	 }
                         },
                         error: function (D) {
                    		 	toastr.error(D.message);
                         }
                     });
     	   	});
             
		</script>
	</div>
</body>
</html>